<template>
	<view class="highTeam">
		<view class="highTeamBox">
			<view class="teamListTitle">待出账奖金</view>
			<view class="reward">
				<view class="flex">
					<view class="menu">
						<view class="val">
							<view>订单数量</view>
							<view class="text"><text>{{teamInfo.orderCount}}</text></view>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="menu">
						<view class="val">
							<view>订单总金额</view>
							<view class="text"><text>{{teamInfo.orderAmountSum}}</text>元</view>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="menu">
						<view class="val">
							<view>分销总金额</view>
							<view class="text"><text>{{teamInfo.disAmountSum}}</text>元</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
		<view class="highTeamBox">
			<view class="teamListTitle">奖励统计</view>
			<view v-if="teamList.length > 0">
				<tui-list-view backgroundColor="#fff">
					<tui-list-cell v-for="(item,index) in teamList" :key="index">
						<view class="teamList" @click="teamClick(item)">
							<view class="label">
								<image v-if="index == 0" class="num_img" :src="imgConfig + 'images/mall/first.png'" mode="widthFix"></image>
								<image v-else-if="index == 1" class="num_img" :src="imgConfig + 'images/mall/second.png'" mode="widthFix"></image>
								<image v-else-if="index == 2" class="num_img" :src="imgConfig + 'images/mall/third.png'" mode="widthFix"></image>
								<view v-else-if="index > 2" class="num">{{index + 1}}</view>
								<view class="img">
									<image :src="item.headImgUrl?item.headImgUrl:imgConfig + 'images/mall/spread_d_icon.png'" mode="widthFix" class="head"></image>
								</view>
								<view class="text">
									<view class="h1">
										{{item.userName}}
										<text v-if="item.fissionName == 'V0'" class="level" style="background: linear-gradient(135deg, #C2C3E1, #928EB1);">{{item.fissionName}}</text>
										<text v-else-if="item.fissionName == 'V1'" class="level" style="background: linear-gradient(135deg, #EFDAB2, #EBAE64);">{{item.fissionName}}</text>
										<text v-else-if="item.fissionName == 'V2'" class="level" style="background: linear-gradient(135deg, #DEDEDE, #B0B0B0);">{{item.fissionName}}</text>
										<text v-else-if="item.fissionName == 'V3'" class="level" style="background: linear-gradient(135deg, #EBE2DB, #E4BA99);">{{item.fissionName}}</text>
									</view>
									<view class="h2">{{item.mobile}}</view>
								</view>
							</view>
							<view class="val">
								<view class="text">
									￥{{item.disAmountSum}} >
									<!-- <view class="btn">提 醒</view> -->
								</view>
							</view>
						</view>
					</tui-list-cell>
				</tui-list-view>
			</view>
			<view v-else-if="teamList.length == 0">
				<tui-no-data style="margin-top: 0rpx;" :imgUrl="imgConfig + 'images/mall/my_course_empty.png'">暂无数据</tui-no-data>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {
				imgConfig: util.domainImg,
				teamInfo: {}, // 团队信息
				teamList: [], // 团队列表
				userId: "",
				current: 1,
				pages: '',
				loadding: false,
				pullUpOn: true,

			};
		},
		computed: {

		},
		watch: {

		},
		onLoad(options) {
			this.getList();
		},
		onShow() {

		},
		onPullDownRefresh: function() {
			this.current = 1;
			this.pullUpOn = true;
			this.loadding = false;
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			this.loadding = true;
			if (this.current == this.pages) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.getList(true);
				this.loadding = false;
			}
		},
		methods: {
			// 团队奖励
			teamClick(item) {
				uni.navigateTo({
					url: "./distributionRecord?orderInfo=" + JSON.stringify(item)
				});
			},
			// 团队列表
			getList(selet_type) {
				this.teamInfo = JSON.parse(uni.getStorageSync('billOrderInfo'));
				if (JSON.stringify(this.teamInfo) !== '{}') {
					this.teamList = this.teamInfo.dtoList
				}
			},
		},
	};
</script>

<style lang="scss">
	.highTeam {
		padding: 20rpx 30rpx;
		.highTeamBox {
			overflow: hidden;
			border-radius: 16rpx;
		}
		
		.reward {
			margin-top: -30rpx;
		}
		.mid {
			padding-top: 50rpx;

			.tui-btn {
				margin-bottom: 30rpx !important;
			}
		}
		.teamList {
			.num_img {
				width: 38rpx;
			}
		}

		.drawer {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
			background: #fff;
			width: 100vw;

			.d-container {
				height: 100vh !important;
				position: relative;

				.inviteClose {
					position: absolute;
					right: 60rpx;
					top: 30rpx;
				}

				.cont {
					padding: 200rpx 40rpx;

					.input {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						height: 80rpx;
						margin-bottom: 40rpx;

						.label {
							font-size: 36rpx;
							color: #333;
							font-weight: bold;
							width: 200rpx;
							text-align: right;
							margin-right: 60rpx;

						}

						.val {
							font-size: 32rpx;
							color: #333;
							font-weight: bold;
							display: flex;
							justify-content: flex-start;
						}
					}

					.shareLink {
						padding: 0 40rpx;
						color: rgb(88, 108, 148);
						text-align: left;
					}
				}
			}
		}

		.modal {
			.custom {
				.head {
					text-align: center;

					.h1 {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					.h2 {
						font-size: 28rpx;
						color: #666;
						padding-top: 10rpx;
					}
				}

				.input {
					font-size: 30rpx;
					color: #333;
					border: 1px solid #eee;
					height: 80rpx;
					margin: 40rpx 0 100rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.handle {
					display: flex;
				}
			}
		}
	}
</style>
